import React, { Component } from 'react';
import { Checkbox } from 'antd';

class CheckBoxShow extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: []
        }
    }

    onChange = (index) => {
        let { value } = this.state;
        if (this.state.value.indexOf(index) === -1) {
            value.push(index);

            this.setState({
                value
            });
        }else {
            value.splice(index, 1);
        }
    }

    render() {
        if (this.props.isSubmit) {
            this.props.handleData(this.props.id, this.state.value)
        }

        var temp;

        if (this.props.isRequired) {
            temp = <span style={{
                color: '#f00'
            }}>
                *
            </span>
        }

        return (
            <div style={{
                fontSize: 30,
                paddingLeft: 50
            }}>
                <div style={{
                    paddingTop: 20,
                }}>
                    <span style={{
                        fontWeight: 'bold'
                    }}>{`${this.props.index + 1}. `}</span>
                    <span>{this.props.title}</span>
                    {temp}
                </div>
                {
                    this.props.options.map((item, index) => {
                        return (
                            <div key={index} style={{
                                paddingBottom: 10
                            }}>
                                <Checkbox onChange={() => this.onChange(index)}>{item}</Checkbox>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default CheckBoxShow;